import React, {Component} from 'react';
import { Image, View, Platform, BackHandler } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import Details from './components/DetailsScreen'
import Next from './components/Next'
import NewsDetail from './components/NewsDetail'
import NewsList from './components/NewsList'
// tabs 页面
import HomeTab from './components/tabs/HomeTab'
import PersonalTab from './components/tabs/PersonalTab'
import ShopTab from './components/tabs/ShopTab'
import UserTab from './components/tabs/UserTab'
// 设置
import Set from './components/Set'
import AccountSecurity from './components/AccountSecurity'
import ChangePassword from './components/ChangePassword'
import ChangeMobile from './components/ChangeMobile'
import NewMobile from './components/NewMobile'
import AboutUs from './components/AboutUs'
import Suggest from './components/Suggest'
// 消息中心
import Message from './components/Message'
// 登录注册
import Login from './components/Login'
import Register from './components/Register'
import ForgetPwd from './components/ForgetPwd'
// 个人信息
import UserInfo from './components/UserInfo'
import ChangeNick from './components/ChangeNick'
// 地址
import AddAddress from './components/AddAddress'
import AddNewAddress from './components/AddNewAddress'
import MyAddress from './components/MyAddress'
import ChooseAddress from './components/ChooseAddress'
import EditAddress from './components/EditAddress'
//中奖详情
import PrizeDetail from './components/PrizeDetail'
// 我的订单
import MyOrder from './components/MyOrder'
import OrderDetail from './components/OrderDetail'
// 商品收藏
import MyCollection from './components/MyCollection'
// 文章收藏
import NewsCollection from './components/NewsCollection'
// 足迹
import FootPrint from './components/FootPrint'
// 附近维修点
import Near from './components/Near'
// 私人订制
import MyModel from './components/MyModel'
import ChooseType from './components/ChooseType'
import ConfirmOrder from './components/ConfirmOrder'
import Toast from 'react-native-root-toast';
// 客服
import Kefu from './components/Kefu'
// 地图
import Map from './components/Map'
// 测试Flalist
import FlatLists from './components/FlatLists'
// 页面切换过渡效果
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
// Home
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isBack: false,
            visible: false,
        };
        // 监听android返回键
        this.onBackAndroid = this.onBackAndroid.bind(this)
    }
    componentDidMount(){
        if (Platform.OS === 'android') {
           BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }
    componentWillUnmount(){
        BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
        console.log('卸载了')
    }

    onBackAndroid(){
        let that = this;
        if(this.state.isBack){
            return false;
        }else {
            this.setState({
                isBack: true,
                visible: true,
            },function(){
                setTimeout(function(){
                    that.setState({
                        isBack: false,
                        visible: false,
                    })
                },2000);
                console.log('再按一次返回键退出');
            })
            return true;
        }
    }
    render() {
        // global.HomeTabIndex = this;
        const { navigate } = this.props.navigation;
        return (
            <View>
                <HomeTab navigate={navigate} />
                <Toast
                    visible={this.state.visible}
                    duration={2000}
                    animation={true}
                    shadow={true}
                    position={-50}
                >再按一次返回键退出</Toast>
            </View>
        );
    }
}
// Personal
class Personal extends Component {
    render() {
        // global.PersonalTabIndex = this;
        const { navigate } = this.props.navigation;
        return (
            <PersonalTab navigate={navigate} />
        );
    }
}
// Shop
class Shop extends Component {
    render() {
        // global.ShopTabIndex = this;
        const { navigate } = this.props.navigation;
        return (
            <ShopTab navigate={navigate} />
        );
    }
}
// User
class User extends Component {
    render() {
        // global.UserTabIndex = this;
        const { navigate } = this.props.navigation;
        return (
            <UserTab navigate={navigate} />
        );
    }
}

const App = TabNavigator(
    {
        Home: {
            screen: Home,
            path: '/Home',
            navigationOptions: {
                tabBarLabel: '首页',
                tabBarIcon: ({ focused, tintColor }) => (
                    focused?
                    <Image
                        source={require('./images/one.png')}
                        style={{width: 32,height: 32}}
                    />
                    :
                    <Image
                        source={require('./images/one-1.png')}
                        style={{width: 32,height: 32}}
                    />
                ),
                tabBarOnPress: (obj)=>{
                    // alert(global.HomeTabIndex.state.tabIndex) 
                    obj.jumpToIndex(obj.scene.index)
                },
            }
        },
        Personal: {
            screen: Personal,
            path: '/Personal',
            navigationOptions: {
                tabBarLabel: '私人订制',
                tabBarIcon: ({ focused, tintColor }) => (
                    focused?
                    <Image
                        source={require('./images/two.png')}
                        style={{width: 32,height: 32}}
                    />
                    :
                    <Image
                        source={require('./images/two-1.png')}
                        style={{width: 32,height: 32}}
                    />
                ),
                tabBarOnPress: (obj)=>{
                    // alert(global.PersonalTabIndex.state.tabIndex)
                    obj.jumpToIndex(obj.scene.index)
                },
            }
        },
        Shop: {
            screen: Shop,
            path: '/Shop',
            navigationOptions: {
                tabBarLabel: '购物车',
                tabBarIcon: ({ focused, tintColor }) => (
                    focused?
                    <Image
                        source={require('./images/three.png')}
                        style={{width: 32,height: 32}}
                    />
                    :
                    <Image
                        source={require('./images/three-1.png')}
                        style={{width: 32,height: 32}}
                    />
                ),
                tabBarOnPress: (obj)=>{
                    // alert(global.ShopTabIndex.state.tabIndex)
                    global.ShopTabIndex._showModal();
                    obj.jumpToIndex(obj.scene.index)
                },
            }
        },
        User: {
            screen: User,
            path: '/User',
            navigationOptions: {
                tabBarLabel: '我的',
                tabBarIcon: ({ focused, tintColor }) => (
                    focused?
                    <Image
                        source={require('./images/four.png')}
                        style={{width: 32,height: 32}}
                    />
                    :
                    <Image
                        source={require('./images/four-1.png')}
                        style={{width: 32,height: 32}}
                    />
                ),
                tabBarOnPress: (obj)=>{
                    // console.log(global.UserTabIndex)
                    global.UserTabIndex._showModal();
                    obj.jumpToIndex(obj.scene.index)
                },
            }
        }
    },{
        initialRouteName: 'Home',  // 默认tab路由
        tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
        backBehavior: 'none',  // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
        animationEnabled: false, // 切换页面时是否有动画效果
        swipeEnabled: false, // 是否可以左右滑动切换tab
        lazy: true, // 懒加载...
        tabBarOptions: {
            activeTintColor: '#0048c2',  // 文字和图片选中颜色
            inactiveTintColor: '#878787',  // 文字和图片未选中颜色
            activeBackgroundColor: '#F00', // 活动选项卡的背景颜色（android无效）
            inactiveBackgroundColor: '#FFF',  // 非活动选项卡的背景颜色（android无效）
            showIcon: true,  // android 默认不显示 icon, 需要设置为 true 才会显示
            indicatorStyle: {
                height: 0,  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
                padding: 0,
            },
            tabStyle: {
                paddingTop: 0,
                padding: 0,
                // 必须加上，因为系统默认有加透明度
                opacity: 1,
            },
            style: {
                backgroundColor: '#fff', // TabBar 背景色
                padding: 0,
            },
            labelStyle: {
                fontSize: 12, // 文字大小
                margin: 0
            },
        },
    }
)

const AllNav = StackNavigator({
    Home: { screen: App },
    Details: { screen: Details },
    Next: { screen: Next },
    NewsDetail: { screen: NewsDetail },
    NewsList: { screen: NewsList },
    Login: { screen: Login},
    Register: { screen: Register},
    ForgetPwd: { screen: ForgetPwd},
    MyAddress: { screen: MyAddress},
    ChooseAddress: { screen: ChooseAddress},
    EditAddress: { screen: EditAddress},
    PrizeDetail: { screen: PrizeDetail},
    MyOrder: { screen: MyOrder},
    OrderDetail: { screen: OrderDetail},
    MyModel: { screen: MyModel},
    ChooseType: { screen: ChooseType},
    ConfirmOrder: { screen: ConfirmOrder},
    Kefu: { screen: Kefu},
    Map: { screen: Map},
    AddAddress: { screen: AddAddress},
    AddNewAddress: { screen: AddNewAddress},
    FootPrint: { screen: FootPrint},
    Near: { screen: Near},
    MyCollection: { screen: MyCollection},
    NewsCollection: { screen: NewsCollection},
    Message: { screen: Message},
    Set: { screen: Set},
    AccountSecurity: {screen: AccountSecurity},
    ChangePassword: {screen: ChangePassword},
    ChangeMobile: {screen: ChangeMobile},
    NewMobile: {screen: NewMobile},
    AboutUs: {screen: AboutUs},
    Suggest: {screen: Suggest},
    UserInfo: {screen: UserInfo},
    ChangeNick: {screen: ChangeNick},
    FlatLists: {screen: FlatLists},
    
},{
    // 设置页面切换的过渡效果：forHorizontal为由右往左
    transitionConfig:()=>({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    }),
    navigationOptions: {
        header: null,
        gesturesEnabled: true
    }
});

export default AllNav;
